/*
对话聊天的路由组件
 */

import React, { Component } from 'react'
import { NavBar, List, InputItem, Grid, Icon } from 'antd-mobile'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'
import MessageItem from '../../components/message-item/message-item'
import { sendMsg, readMsg } from '../../redux/actions'


// const Item = List.Item

class Chat extends Component {

  state = {
    content: '',
    isShow: false // 是否显示表情列表
  }

  // 在第一次render()之前回调
  componentWillMount() {
    // 初始化表情列表数据
    const emojis = ['😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀'
      , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣'
      , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣'
      , '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣', '😀', '😁', '🤣']
    this.emojis = emojis.map(emoji => ({ text: emoji }))
  }

  componentDidMount() {
    // 初始显示列表
    window.scrollTo(0, document.body.scrollHeight)

  }

  componentDidUpdate() {
    // 更新显示列表
    window.scrollTo(0, document.body.scrollHeight)
  }

  componentWillUnmount() { // 在退出之前
    // 发请求更新消息的未读状态
    // 读取消息的时候from和to是互换了的
    const from = this.props.match.params.userid
    const to = this.props.user._id
    this.props.readMsg(from, to)
  }

  toggleShow = () => {
    const isShow = !this.state.isShow
    this.setState({ isShow })
    if (isShow) {
      // 异步手动派发resize事件,解决表情列表显示的bug
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'))
      }, 0)
    }
  }

  handleSend = () => {
    // 收集数据
    const from = this.props.user._id
    const to = this.props.match.params.userid
    const content = this.state.content.trim()

    let sendtime = new Date().toLocaleString()
    // 发送请求(发消息)
    if (content) {
      this.props.sendMsg({ from, to, content, sendtime })
    }
    // 清除输入数据
    this.setState({
      content: '',
      isShow: false
    })
  }

  render() {
    const { user } = this.props
    const { users, chatMsgs } = this.props.chat

    // 计算当前聊天的chatId
    const meId = user._id
    if (!users[meId]) { // 如果还没有获取数据, 直接不做任何显示 , users[meId]存在为{username:'',header:''}
      return null
    }
    const targetId = this.props.match.params.userid
    // chatId为 ===》 发送者的id_接收者的id
    const chatId = [meId, targetId].sort().join('_')

    // 对chatMsgs进行过滤
    const msgs = chatMsgs.filter(msg => msg.chat_id === chatId)

    // 得到目标用户的header图片对象
    const targetHeader = users[targetId].header
    const targetIcon = targetHeader ? require(`../../assets/images/${targetHeader}.png`) : null
    const meIcon = targetHeader ? require(`../../assets/images/${user.header}.png`) : null

    return (
      <div id='chat-page'>
        <NavBar
          icon={<Icon type='left' />}
          className='sticky-header'
          onLeftClick={() => this.props.history.goBack()}
        >
          {users[targetId].username}
        </NavBar>
        <List style={{ marginTop: 50, marginBottom: 50 }}>
          {/*alpha left right top bottom scale scaleBig scaleX scaleY*/}
          <QueueAnim type='left' delay={100}>
            {
              msgs.map(msg => {
                // msg 消息内容
                // thumb 对方的头像
                // thumbME 我方的头像
                // isME 当前消息是否是我发送的
                // meName 我的用户名
                // chatName 对方的用户名
                // 此消息发送的时间
                return (
                  <MessageItem
                    key={msg._id}
                    msg={msg.content}
                    thumb={targetIcon}
                    thumbME={meIcon}
                    isME={targetId === msg.from ? false : true}
                    meName={user.username}
                    chatName={users[targetId].username}
                    sendtime={msg.sendtime}
                  >
                  </MessageItem>
                )
              })
            }
          </QueueAnim>

        </List>

        <div className='am-tab-bar'>
          <InputItem
            placeholder="请输入"
            value={this.state.content}
            onChange={val => {
              this.setState({ content: val })
            }}
            onFocus={() => this.setState({ isShow: false })}
            extra={
              <span>
                <span onClick={this.toggleShow} style={{ marginRight: 5 }} role='img' aria-label='smail'>😊</span>
                <span onClick={this.handleSend}>发送</span>
              </span>
            }
          />
          {this.state.isShow ? (
            <Grid
              data={this.emojis}
              columnNum={8}
              carouselMaxRow={4}
              isCarousel={true}
              onClick={(item) => {
                this.setState({ content: this.state.content + item.text })
              }}
            />
          ) : null}

        </div>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user, chat: state.chat }),
  { sendMsg, readMsg }
)(Chat)